<template>
  <div class="container enroll">
    <!-- tab页 -->
    <van-tabs
      v-if="tabs.length"
      v-model="activeTab"
      swipeable
      sticky
      animated
      title-active-color="#ee732f"
      :ellipsis="false"
      color="#ee732f"
    >
      <van-tab
        v-for="(item,index) in tabs"
        :key="index"
        :title="item.title"
        :name="item.id"
      >
        <div v-if="item.pictures && item.pictures.length">
          <image
            v-for="(path,pi) in item.pictures"
            :key="pi"
            class="tab-image"
            mode="widthFix"
            :src="path"
          />
        </div>
        <div
          v-else-if="item.body"
          class="richcontent"
        >
          <wxParse
            :content="item.body"
            @preview="preview"
            @navigate="navigate"
          />
        </div>
        <van-empty
          v-else
          description="暂无赛程数据"
        />
      </van-tab>
    </van-tabs>
    <van-empty
      v-else
      description="暂无赛程数据"
    />
  </div>
</template>

<script>
// import Image from 'src/components/scalebox/image.vue'
import wxParse from 'mpvue-wxparse'
import {getCmsMatchsApi} from '@/api'
export default {
  components: {
    wxParse
  },

  data () {
    return {
      activeTab: 0,
      tabs: []
    }
  },
  onLoad () {
    this.onLoadData()
  },
  methods: {
    onLoadData () {
      console.log('test')
      console.log(this.value)
      getCmsMatchsApi().then(res => {
        this.tabs = res
        const currentTab = res[0]
        if (currentTab) {
          this.activeTab = currentTab.id
        }
      })
    }
  }
}
</script>

<style lang="less">
.tab-image {
  width: 100%;
}
</style>
